<template>
  <div class="list">
    <div class="menu-wrap">
      <Menu
        text-color="#666"
        active-text-color="#666"
        :default-openeds="['0', '1', '2', '3']"
        @select="selectCate"
      >
        <Submenu
          :index="index.toString()"
          v-for="(item, index) in category"
          :key="index"
        >
          <template v-slot:title>
            <img
              src="~/assets/images/help-login-title.png"
              alt=""
              style="margin-right: 15px"
            />
            <span style="color: #fff">{{ item.title }}</span>
          </template>
          <menu-item-group>
            <menu-item
              v-for="(item2, index2) in item.menu"
              :key="index2"
              :index="item2.article_category_id.toString()"
              :class="item2.article_category_id == id ? 'active' : ''"
            >
              <template v-slot:title>
                <span>{{ item2.info }}</span>
              </template>
            </menu-item>
          </menu-item-group>
        </Submenu>
      </Menu>
    </div>
    <!-- 详情页面 -->
    <div class="content-wrap">
      <div class="rule-list">
        <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
          @click="showArtDe(item.article_id)"
        >
          <p class="title">{{ item.title }}</p>
          <p class="time f14">{{ item.create_time }}</p>
        </div>
      </div>
      <nodata message="暂无内容" :status="listStatus"></nodata>
      <m-pagination
        :pagination="total"
        :page-size="limit"
        @changePage="changeThisPage"
      />
    </div>
  </div>
</template>

<script>
import { Menu, MenuItem, MenuItemGroup, Submenu } from "element-ui"
import MPagination from "@/components/common/m-pagination/MPagination"
import { getHelpList, getCategory2, getHelpDe } from "@/request/api"

export default {
  name: "List",
  components: { MPagination, Menu, MenuItem, Submenu, MenuItemGroup },
  data() {
    return {
      id: "",
      category: [],
      list: [],
      page: 1,
      listStatus: 1,
      total: 0,
      limit: 10
    }
  },
  created() {
    this.id = this.$route.query.id
    this.artId = this.$route.query.art
    this.getList()
    this.getCate()
  },
  methods: {
    showArtDe(id) {
      this.$router.push({name: 'HelpDetail',query: {id}})
    },
    getDetail() {
      getHelpDe(this.artId).then((res) => {
        this.info = res.data
        this.id = res.data.cid
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    selectCate(id) {
      this.id = id
      this.page = 1
      this.getList()
    },
    getList() {
      this.listStatus = 1
      this.list = []
      let data = {
        cid: this.id,
        page: this.page
      }
      getHelpList(data).then((res) => {
        this.list = res.data.list
        this.total = res.data.count
        if (this.total == 0) {
          this.listStatus = 0
        } else {
          this.listStatus = 2
        }
        window.scrollTo({ top: 0 })
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    getCate() {
      getCategory2(0).then((res) => {
        this.category = res.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    changeThisPage(page) {
      this.page = page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

/deep/ .el-submenu {
  background-color: $theme-color-1;
}
/deep/ .el-menu-item-group__title {
  display: none;
  padding-top: 0 !important;
}
/deep/ .el-menu-item:focus,
/deep/ .el-menu-item:hover {
  background: #eee;
  color: #e48b2c !important;
}
/deep/ .el-submenu .el-menu-item {
  text-align: center;
}
/deep/ .el-submenu__title {
  text-align: center;
  &:hover {
    background-color: $theme-color-1;
  }

  .el-submenu__icon-arrow {
    color: #fff;
  }
}
/deep/ .el-submenu .el-menu-item.active {
  background: #eee;
  color: #e48b2c !important;
}

.list {
  display: flex;
  justify-content: space-between;

  .menu-wrap {
    width: 305px;
  }

  .content-wrap {
    width: calc(90% - 225px);
    background-color: #fff;
    padding: 15px;

    .rule-list {
      padding: 15px;
      color: #666;
      font-size: 16px;
      margin-bottom: 30px;

      .item {
        padding: 20px 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: solid 1px #eaeaea;
        cursor: pointer;

        &:hover {
          background-color: rgb(243, 244, 247);
        }
      }
    }

    .details {
      font-size: 16px;
      color: #666;

      .title {
        font-size: 18px;
        margin-bottom: 15px;
      }

      .time {
        color: #969696;
        margin-bottom: 15px;
      }

      ._content {
        min-height: 200px;
        padding: 15px;
        background-color: rgb(243, 244, 247);
        margin-bottom: 15px;
      }

      .page {
        font-size: 16px;
        color: #666;

        p {
          cursor: pointer;
        }

        .prev {
          margin-bottom: 10px;
          &:hover {
            color: $theme-color-1;
          }
        }
      }
    }
  }
}
</style>
